<template>

  <div id="index" >
    <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b">


<!--      @click="$router.push('/user')"-->
      <el-menu-item index="1"  @click="dialogVisible = true">个人信息</el-menu-item>

      <el-submenu index="2">
        <template slot="title">创建相册</template>
<!--        <el-menu-item index="2-1">幸福一家人❤</el-menu-item>-->
<!--        <el-menu-item index="2-2">帅帅欧巴❤</el-menu-item>-->
<!--        <el-menu-item index="2-3">幸福一家人❤</el-menu-item>-->

      </el-submenu>

    </el-menu>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

    <div class="line" style="height: 30px;width: 100%"></div>
<!--    <div style="text-align: right;float: right">-->
<!--      <i class="el-icon-user-solid" @click="$router.push('/index')" style="font-size: 1.5em;"></i>-->
<!--    </div>-->
<!--<div style="float: right;font-size: 1.5em;text-align: left">个人信息</div>-->
    <div style="display: flex">
      <div style="flex: 2"></div>
      <div style="flex: 6;
    box-shadow: 0px 2px 12px 0px rgb(14 13 14);
    margin-bottom: 30px;border-radius: 10px;
}">
        <el-carousel indicator-position="outside">
          <el-carousel-item v-for="item in urls" :key="item">
            <img :src="item.img" alt="" width="100%" height="100%">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div style="flex: 2"></div>
    </div>
    <!--    相册分布部分-->
<!--    间隔-->
    <div class="line" style="height:15px;width: 100%"></div>
    <div class="nav" style="display: flex">
      <div style="flex: 1"></div>
      <div class="nav-2" style="flex: 2;box-shadow: 0px 2px 12px 0px rgb(14 13 14);">
        <img src="../assets/欧巴.jpg"
             style="width: 100%; height: 300px;border-radius: 5px;">
        <div style="text-align: left;font-size: 1.5em">幸福一家人❤</div>
        <button class="one" @click="$router.push('/album')">查看更多照片</button>
      </div>
      <div style="flex: 0.2"></div>
      <div class="nav-2" style="flex: 2;box-shadow: 0px 2px 12px 0px rgb(14 13 14);">
        <img src="../assets/欧巴.jpg"
             style="width: 100%;height: 300px;border-radius: 5px;">

        <div style="text-align: left;font-size: 1.5em">帅帅欧巴❤</div>
        <button class="one" @click="$router.push('/album')">查看更多照片
        </button>

        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>
      <div style="flex: 1"></div>

    </div>


  </div>

</template>
<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
<script>
export default {
  name: "index",
  data() {

    return {
      dialogVisible :false,
      urls: [
        {img: require("@/assets/欧巴 (8).jpg")},
        {img: require("@/assets/欧巴 (4).jpg")},
        {img: require("@/assets/欧巴 (5).jpg")},
        {img: require("@/assets/欧巴 (6).jpg")},
        {img: require("@/assets/欧巴 (7).jpg")},
        {img: require("@/assets/陈伟霆.jpg")},

        //   'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        //   'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        //   'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        //   'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        //   'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        //   'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        //   'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ]

    }

  }

}
</script>

<style lang="scss">
#index {
  //element.style {
  //  flex: 6 1 0%;
  //  box-shadow: 2px 4px 15px 1px rgb(77 75 77);
  //  margin-bottom: 20px;
  //}
  .el-carousel__container {
    position: relative;
    height: 450px;
  }

  .nav-2 {
    display: inline-block;
    background-color: white;
    height: 400px;
    border-radius: 10px;
    //margin: 15px 5px;

  }

  .one {
    float: right;
    margin: 10px;
    background-color: #df90e2;
    border: none;
    margin: 10px;
    padding: 8px;
    border-radius: 5px;
  }
}
</style>